/*
 * @Author: Wxx
 * @Date: 2022-02-27 16:32:27
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-27 16:42:51
 * @Description:
 */
import React, { Component } from "react";
import { Map, List } from "immutable";
export default class App extends Component {
  state = {
    info: Map({
      name: "冰墩墩",
      location: Map({
        province: "河北",
        city: "北京",
      }),
      favor: List(["滑雪", "溜冰", "跳舞"]),
    }),
  };
  render() {
    return (
      <div>
        <h1>个人信息</h1>
        <button
          onClick={() => {
            this.setState({
              info: this.state.info
                .set("name", "雪融融")
                .set(
                  "location",
                  this.state.info
                    .get("location")
                    .set("province", "四川")
                    .set("city", "成都")
                ),
            });
          }}
        >
          修改名字和地址
        </button>
        <p>{this.state.info.get("name")}</p>
        <p>
          {this.state.info.get("location").get("province")}--
          {this.state.info.get("location").get("city")}
        </p>
        {this.state.info.get("favor").map((item, index) => (
          <li key={item}>
            {item}
            <button
              onClick={() => {
                this.setState({
                  info: this.state.info.set(
                    "favor",
                    this.state.info.get("favor").splice(index, 1)
                  ),
                });
              }}
            >
              del
            </button>
          </li>
        ))}
      </div>
    );
  }
}
